<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">
        <!-- 列表的渲染
          v-for右侧的属性值不能瞎写、不能胡写、不能乱写。按照人家的语法来搞
          v-for = "元素  in  数组"
          stu:是数组里面的每一个元素   stu你可以当中一个变量，变量在使用的时候，需要用到插值语法
          students:需要遍历的数据【数组】 
          index:是数组里面元素的索引值
          注意:in与前面、后面切记保留住空格，如果没有空格把in当中=做一个整体了，就没有关键字in，导致报错

          v-for渲染列表的时候,也需要加上key属性，且key属性值应该是独一无二的

          key:属性值，是独一无二的，不能相同。
          key：属性值可以用index，尽可能别使用,万一有逆序的操作会有问题的。
          尽可能使用的是元素的id
        -->



        <!-- //v-for指令，到底能遍历哪些数据?
        //v-for可以遍历以下数据:数组、数字、字符串、对象
        //v-for遍历数据:工作、项目当中一般只是使用数组!!!! -->


        <h1>遍历数组</h1>
        <ul>
            <li v-for="stus in students" :key="stus.id">{{stus.name}}----{{stus.age}}</li>
        </ul>
        <h1>遍历数字</h1>
           <!-- 遍历数字的时候，从数字1开始的 -->
        <!-- 索引值一定是从数字零开始的 -->
        <p v-for="(num,index) in 8" :key="index">{{num}}----{{index}}</p>
        <h1>遍历字符串</h1>
        <p v-for="(str,index) in '今天中午麻辣烫'" :key="str">{{str}}---{{index}}</p>
        <h1>遍历对象</h1>
          <!--
             o:对象的属性值
             i:对象的属性名称
        -->
        <p v-for="(o,i) in obj" :key="i">{{o}}---{{i}}</p>
    </div>
</body>

</html>
<script>
    //关联VM
    const VM = new Vue({
        el: '#app',
        data: {
            students: [
                { id: 1, name: '扁鹊', age: 18 },
                { id: 2, name: '扁鹊', age: 18 },
                { id: 3, name: '扁鹊', age: 18 },
                { id: 4, name: '扁鹊', age: 18 },
                { id: 5, name: '扁鹊', age: 18 }

            ],
            obj:{
                name:'小红',
                age:18
            }
        }
    })
</script>